<template>
  <div id="linechart" ref="lineChart" :style="{'width':'100%', 'height':(dataSize=='normal'?'200px':'300px')}"/>
</template>

<script>
import echarts from 'echarts'
import resize from '@/utils/resize'
// import { setWatermark } from '@/utils'

export default {
  mixins: [resize],
  props: {
    dataSize: {
      type: String,
      default: 'normal'
    },
    chartData: {
      type: Object,
      default: () => {}
    },
    // title: {
    //   type: String,
    //   default: ''
    // },
    series: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null,
      option: {},
      data: [],
      lineY: []
    }
  },
  // watch: {
  //   chartData(val) {
  //     if (val) {
  //       this.renderChart()
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      if (this.chartData) {
        for (var i = 0; i < this.chartData.row.length; i++) {
          var x = i
          if (x > this.chartData.color.length - 1) {
            x = this.chartData.color.length - 1
          }
          var data = {
            name: this.chartData.row[i].by_values,
            type: 'line',
            color: this.chartData.color[x],
            legendHoverLink: true,
            lineStyle: {
              normal: {
                width: 1.5
              }
            },
            data: this.chartData.row[i].values
          }
          this.lineY.push(data)
        }
        console.log(this.lineY)
      }
      this.chart = echarts.init(this.$refs.lineChart)
      this.renderChart()
    })
  },
  methods: {
    renderChart() {
      this.option = {
        // backgroundColor: {
        //   image: setWatermark(),
        //   repeat: 'repeat'
        // },
        title: {
          // text: this.title,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        legend: {
          left: 'center',
          bottom: '0px',
          textStyle: {
            color: '#475669'
          }
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '30px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true, // x轴从0开始到结束显示
          axisTick: {
            interval: 1
          },
          axisLabel: {
            color: '#475669',
            interval: 1
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ddd'
            }
          },
          data: this.chartData ? this.chartData.series : ['2019-11-07 00:00:00', '2019-11-08 00:00:00', '2019-11-09 00:00:00', '2019-11-10 00:00:00', '2019-11-11 00:00:00', '2019-11-12 00:00:00', '2019-11-13 00:00:00']
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#ddd'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#475669'
          }
        },
        series: this.chartData ? this.lineY : this.series
      }
      this.chart.setOption(this.option)
    }
  }
}
</script>
